@import '../../styles/themes/default.scss';

/*  BUTTONS  */
.#{$css-prefix}-button {
  font-size: ($font-size-base*1.6);
  border-width: 0; //清除button标签的默认边框样式
  min-width: ($font-size-base*15);
  height: ($font-size-base*4);
  border-radius: ($font-size-base*1);
  box-shadow: (0.3*$font-size-base) (0.3*$font-size-base) (0.6*$font-size-base) var(--greyLight-2), (-0.2*$font-size-base) (-0.2*$font-size-base) (0.5*$font-size-base) var(--white);
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s ease;
}
.mg-button__primary {
  grid-column: 1/2;
  grid-row: 4/5;
  background: var(--primary);
  box-shadow: inset (0.2*$font-size-base) (0.2*$font-size-base) 1em var(--primary-light), inset (-0.2*$font-size-base) (-0.2*$font-size-base) (1*$font-size-base) var(--primary-dark), (0.3*$font-size-base) (0.3*$font-size-base) (0.6*$font-size-base) var(--greyLight-2), (-0.2*$font-size-base) (-0.2*$font-size-base) (0.5*$font-size-base) var(--white);
  color: var(--greyLight-1);
}
.mg-button__primary:hover {
  color: var(--white);
}
.mg-button__primary:active {
  box-shadow: inset (0.2*$font-size-base) (0.2*$font-size-base) 1em var(--primary-dark), inset (-0.2*$font-size-base) (-0.2*$font-size-base) (1*$font-size-base) var(--primary-light);
}
.mg-button__secondary {
  grid-column: 1/2;
  grid-row: 5/6;
  color: var(--greyDark);
}
.mg-button__secondary:hover {
  color: var(--primary);
}
.mg-button__secondary:active {
  box-shadow: inset (0.2*$font-size-base) (0.2*$font-size-base) (0.5*$font-size-base) var(--greyLight-2), inset (-0.2*$font-size-base) (-0.2*$font-size-base) (0.5*$font-size-base) var(--white);
}
// .mg-button {
//   font-size: 1.6em;
// }